<div class="form-group" data-bind="validationElement: connectionStringName">
    <label class="control-label">Name<i class="required"></i></label>
    <div class="flex-grow">
        <input class="form-control" data-bind="textInput: connectionStringName, enable: isNew, attr: { 'title': isNew() ? 'Enter any name of your choice for this connection string' : '' }"
               placeholder="Enter a name for the connection string" />
    </div>
</div>
<div class="form-group">
    <label class="control-label">Authentication</label>
    <div class="flex-grow">
        <button type="button" class="btn btn-block dropdown-toggle text-left" data-toggle="dropdown" aria-expanded="false">
            <span data-bind="text: formatAuthenticationType(authenticationType())"></span>
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
            <li><a href="#" data-bind="click: _.partial(authenticationType, 'basic')"><span data-bind="text: formatAuthenticationType('basic')"></span></a></li>
            <li><a href="#" data-bind="click: _.partial(authenticationType, 'passwordless')"><span data-bind="text: formatAuthenticationType('passwordless')"></span></a></li>
        </ul>
    </div>
</div>
<div data-bind="visible: authenticationType() === 'basic', with: basicModel">
    <div class="form-group" data-bind="validationElement: accessKey">
        <label class="control-label">Access Key<i class="required"></i></label>
        <div class="flex-grow">
            <input class="form-control" data-bind="textInput: accessKey" />
        </div>
    </div>
    <div class="form-group" data-bind="validationElement: secretKey">
        <label class="control-label">Secret Key<i class="required"></i></label>
        <div class="flex-grow">
            <input class="form-control" data-bind="textInput: secretKey" />
        </div>
    </div>
    <div class="form-group" data-bind="validationElement: regionName">
        <label class="control-label">Region Name<i class="required"></i></label>
        <div class="flex-grow">
            <input class="form-control" data-bind="textInput: regionName" />
        </div>
    </div>
</div>

